<template>
	<view class="mian">
		<!-- #ifdef MP-WEIXIN -->
		<navbar :bgColor="bgColor" :btnColors='btnColor' title="新增银行卡" :isGoBack="true" :isNotice="true" :visible="true" ></navbar>
		<!-- #endif -->
	    <view class="opinion_wrap">
			<view class="ml-10 mr-10 mt-20" style="width: 100%;background-color: #fff;border-radius: 16rpx">
				<view class="flex uni-form-item all_shop border-b">				  	
				  	<view class="title" style="width: 125rpx;">持卡人</view>
				  	<input class="uni-input ml-30 text-right" v-model="formData.name" focus placeholder="请输入持卡人"  placeholder-style="text-align: right;font-size:23rpx"/>
				</view>	
						  
				<view class="flex uni-form-item all_shop border-b">
				  	<view class="title" style="width: 125rpx;">卡号</view>
				  	<input class="uni-input ml-30 text-right" v-model="formData.bank_num" focus placeholder="请输入卡号"  placeholder-style="text-align: right;font-size:23rpx"/>
				</view>
				
				<view class="flex uni-form-item all_shop border-b">
				  	<view class="title" style="width: 155rpx;">银行卡名称</view>
				  	<view class="title flex" style="color: #888888;margin-right: -20rpx;" @click="show = true">
						<text>{{bank_name?bank_name:'请选择'}}</text>
					    <u-icon name="arrow-right" color="rgba(3, 31, 55, 0.6);" size="15"  ></u-icon>
					</view>
				</view>
				  
				
					
			</view>
			<view class="ml-10 mr-10 mt-20" style="width: 100%;background-color: #fff;border-radius: 16rpx">
				<view class="flex uni-form-item all_shop border-b">
				  	<view class="title" style="width: 285rpx;">银行卡预留手机号</view>
				  	<input class="uni-input ml-30 text-right" v-model="formData.phone" focus placeholder="请输入手机号"  placeholder-style="text-align: right;font-size:23rpx"/>
				  </view>
				  
				<view class="flex uni-form-item all_shop border-b">
					<view class="title" style="width: 125rpx;">验证码</view>
					<view class="flex">
						<input class="uni-input ml-30 text-right" v-model="formData.code" focus placeholder="请输入验证码"  placeholder-style="text-align: right; font-size:23rpx;padding-top:10rpx"/>
						<view class="get-code ml-20" @click.stop="getCode()">
						   <text class="">{{getCodeText}}</text>
						</view>
					</view>
				</view>	
				<view class="flex  all_shop border-b ml-10 flex-direction mt-30" style="margin-right: 100rpx;">
					<view class="bg-white p-20 flex justify-between pr-20"  style="border-radius: 16rpx;width: 108%;background-color: #fff;">
						<text class="ml-10">设为默认地址</text>
					    <u-switch v-model="check_addres" @change="is_def" activeColor="#36B3E9" size="22"></u-switch>			 
					</view>				
				</view>	
			</view>	
				  				  
			
			</view>
			
				<button @click="submit" >确认新增</button>
			
		<u-picker :show="show" :columns="columns" @close="show = false" @cancel="show = false" closeOnClickOverlay  @confirm="confirm"  keyName="label"></u-picker>	
		</view>		
		
	</view>
</template>

<script>
	export default {
		data () {
			return {
				...getApp().globalData.config,	
				getCodeText: '获取验证码',
				getCodeBtnColor: "#999999",
				getCodeisWaiting: false,
				formData: {
				    name: '',
					bank_name:'',
					bank_num:'',
					phone:'',
					code:'',
					logo:'',
					image:'',
					
				},		
				show: false,
				columns: [],
				bank_name:'',
				check_addres:true,
				verifyCode:'',
			}			
		},		
		onLoad(e) {					
			if(e.item){
				let item=JSON.parse(e.item)		
				console.log('item',item)
				this.formData.bankId=item.id
				this.formData.name=item.name				
				this.formData.bank_num=item.bank_num
				this.formData.phone=item.phone
				this.formData.bank_name=item.bank_name
				this.bank_name=item.bank_name				
				this.formData.logo=item.logo
				this.formData.image=item.image
			}
		},	
		onShow() {
			
			this.query_bankList()
		},
		methods:{
			 ...getApp().globalData.function,	
			 close(){
				 this.show=false
			 },
			 confirm(e){
				console.log('e',e.value[0].id,e.value[0].label) 
				// this.formData.bankId=e.value[0].id
				this.formData.bank_name=e.value[0].label
				this.formData.logo=e.value[0].logo
				this.formData.image=e.value[0].image
				this.bank_name=e.value[0].label
				this.show=false
			 },
			// 点击获取验证码
			getCode() {
				let that = this
				uni.hideKeyboard()          //隐藏已经显示的软键盘，如果软键盘没有显示则不做任何操作。
				if (this.getCodeisWaiting) {
					return;
				}
				// if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.form.mobileNumber))) { //校验手机号码是否有误
				// 	uni.showToast({
				// 		title: '请填写正确手机号码',
				// 		icon: "none"
				// 	});
				// 	return false;
				// }
			    
				let formData=this.formData
				if(!formData.phone){
					this.$showToast('请填写手机号！')
					return false
				}
				this.getCodeText = "发送中..." //发送验证码
				this.getCodeisWaiting = true;
				this.getCodeBtnColor = "#000000" //追加样式，修改颜色
				//示例用定时器模拟请求效果（跟后端联调时这里可写接口)
				//setTimeout(()用于在指定的毫秒数后调用函数或计算表达式
				that.$http.alisend({phone:formData.phone}).then(res=>{
					console.log('res',res)
					if (res.resCode == '9999') {
						setTimeout(() => {
							uni.showToast({
								title: '验证码已发送',
								icon: "none"
							}); // 出提示框
							//示例默认1234，生产中请删除这一句。
							that.verifyCode = res.data.code; //纯前端发送验证码，进行填入
							that.setTimer();       //调用定时器方法
						}, 1000)
					}else{
						uni.showToast({title:res.resMessage,icon:"none"})
					}
				})
			},
			//setTimer： 需要每隔一段时间执行一件事的的时候就需要使用SetTimer函数
			setTimer() {
				let holdTime = 60; //定义变量并赋值
				this.getCodeText = "重新获取(60)"
				//setInterval（）是一个实现定时调用的函数，可按照指定的周期（以毫秒计）来调用函数或计算表达式。
				//setInterval方法会不停地调用函数，直到 clearInterval被调用或窗口被关闭。
				this.Timer = setInterval(() => {
					if (holdTime <= 0) {
						this.getCodeisWaiting = false;
						this.getCodeBtnColor = "#999999";
						this.getCodeText = "获取验证码"
						clearInterval(this.Timer); //清除该函数
						return; //返回前面
					}
					this.getCodeText = "重新获取(" + holdTime + ")"
					holdTime--;
				}, 1000)
			},			
			submit(e){
				let formData=this.formData
				let that =this
				if(!formData.name){
					this.$showToast('请填写姓名！')
					return false
				}
				if(!formData.bank_num){
					this.$showToast('请填写银行卡！')
					return false
				}	
				
				if(!formData.bank_name){
					this.$showToast('请选择银行卡！')
					return false
				}	
				
				if(!formData.phone){
					this.$showToast('请填写手机号！')
					return false
				}	
				
				if(!formData.code){
					this.$showToast('请填写验证码！')
					return false
				}	
				
				if(this.verifyCode!=formData.code){
					this.$showToast(' 验证码错误~！')
					return false
				}
				
				
				formData.is_default=this.check_addres==true?1:0
									
				formData.token=uni.getStorageSync('userInfo').token
				this.$http.AddMemberBank(formData).then(res=>{
					if(res.resCode=='9999'){
						if(res.resCode=="9999"){
						  uni.showToast({ title: res.resMessage, icon: 'none' })
						  setTimeout(function(){
							  uni.navigateTo({
								url:"/pages/pagesuser/bankList/index",
							  })
						  },2000)
						}else{
						   uni.showToast({ title: res.resMessage, icon: 'none' })
						}
					}				
				})		
			},	
					
			query_bankList(){
				let that=this
				this.$http.bankList().then(res=>{
					if(res.resCode=='9999'){
						that.columns[0]=(res.data.bank_list)
						console.log('res',res)
					}				
				})
			}
		}
	}
</script>
<style>
	page{
		background-color: #F0F9FE;
	}
	.get-code{
		display: flex;
		width: 172rpx;
		height: 56rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		border: 1rpx solid #36B3E9;
		font-weight: 400;
		font-size: 23rpx;
		color: #36B3E9;
		justify-content: center;
		align-items: center;
		text-align: center;
		line-height: 23rpx;
	}
	.fsz_info{
		display: flex;
		margin-top: 40rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: rgba(1, 31, 55, 0.6);
		line-height: 7rpx;
	}
	.opinion_wrap{
		display: flex;
		flex-wrap: wrap;
		
		margin-left: 20rpx;
		margin-right: 20rpx;
		border-radius: 27rpx;
		
		flex-direction: row;
	}
	button::after{
		border: none;
	}
	.box{
	  position: absolute;
	  left: 0;
	  bottom: 0;
	  overflow: hidden;
	  width: 100%;
	  height: 100vh;
	  z-index: 8;
	}
	.black{
	  position: absolute;
	  left: 0;
	  top: 0;
	  width: 100%;
	  height: 100vh;
	  background: rgba(0, 0, 0, .5);
	  z-index: 10;
	}
	.nr{
	  position: absolute;
	  left: 0;
	  bottom: 0;
	  width: 100%;
	  height: 500rpx;
	  z-index: 12;
	  background: #FFF;
	}
	.item{
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	  width: 100%;
	  height: 100rpx;
	  line-height: 100rpx;
	  padding: 0 20rpx;
	  box-sizing: border-box;
	  border-bottom: 1px solid #EEE;
	}

	
	.uni-form-item{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		height: 90rpx;
		font-size: 30rpx;
		padding-left: 32rpx;
		padding-right: 32rpx;	
		/* width: 100%; */
	}
	
	button{
		display: flex;
		flex-direction: row;
		justify-content: center;
		color: white;
		border: none;
		width: 85%;
		padding: 5rpx 0rpx;
		position: absolute; /* 设置按钮为绝对定位 */
		bottom: 0; /* 距离底边为0 */
		left: 50%; /* 左侧距离父元素宽度的50% */
		transform: translateX(-50%); /* 向左移动自身宽度的50%，保持水平居中 */	
		background: #36B3E9 ;
		border-radius: 40rpx;
		font-size: 30rpx;
		height: 88rpx;
		margin-bottom: 25rpx;
	}
</style>